<div class="panel panel-default panel-intro">

    <div class="panel-heading">
        {:build_heading(null,FALSE)}
        <ul class="nav nav-tabs" data-field="status">
            <li class="{:$Think.get.status === null ? 'active' : ''}"><a href="#t-all" data-value=""
                                                                         data-toggle="tab">{:__('All')}</a>
            </li>
            {foreach name="statusList" item="vo"}
            <!--            <li class="{:$Think.get.status === (string)$key ? 'active' : ''}"><a href="#t-{$key}" data-value="{$key}" data-toggle="tab">{$vo}</a></li>-->
            {/foreach}
        </ul>
    </div>


    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}"><i
                                class="fa fa-refresh"></i> </a>
                        <a href="javascript:;"
                           class="btn btn-success btn-add {:$auth->check('lists/one/add')?'':'hide'}"
                           title="{:__('快速报价')}"><i class="fa fa-plus"></i> {:__('快速报价')}</a>
                        <a href="javascript:;" class="btn btn-default" style="font-size:14px;color:dodgerblue;">
                            <span class="extend">
                                标准服务费：<span id="all_main_sum">0</span>
                            </span>
                        </a>
                        <a href="javascript:;" class="btn btn-default" style="font-size:14px;color:dodgerblue;">
                            <span class="extend">
                                服务费：<span id="all_main_free">0</span>
                            </span>
                        </a>
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-operate-edit="{:$auth->check('lists/one/edit')}"
                           data-operate-del="{:$auth->check('lists/one/del')}"
                           width="100%">
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>

<style>
    /*报价单样式*/
    .kuang {
        border: 2px solid #000;
        min-width: 800px;
        color: #000;
        font-weight: bold;
    }

    .kuang .titlee {
        height: 60px;
        line-height: 55px;
        text-align: center;
        font-size: 25px;
        font-weight: bold;
        border-bottom: 2px solid #000;
    }

    .kk {
        line-height: 30px;
        padding: 10px 0;
        font-size: 16px;
    }

    .kuang_xinxi {
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        border: 1px solid;
        border-top: 0;
    }

    .leftborder {
        border-left: 1px solid;
    }

    .textleft {
        text-align: left;
    }

    .kuang_list {
        display: flex;
        color: #333;
        font-size: 15px;
        font-weight: 500;
    }

    .list_tit {
        width: 130px;
        text-align: left;
        border-right: 1px solid #fff;
        box-sizing: border-box;
        padding-left: 20px;
        color: #000;
    }

    .list_cont {
        width: 300px;
        padding-left: 10px;
        box-sizing: border-box;
    }

    .table1 {
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        width: 100%;
        border-collapse: collapse;
        font-size: 15px;
        color: #333;
        font-weight: 500;
    }

    .table1 tr:nth-child(odd) {
        background: rgba(241, 243, 245, 0.42);
    }

    .table1 tr:nth-child(even) {
        background: rgba(255, 255, 255, 0.42);
    }

    .table1 td {
        border-top: 1px solid #fff;
        /*border-top: 2px solid #000;*/
        padding: 0 10px;
        height: 35px;
        line-height: 35px;
        box-sizing: border-box;
        width: 20%;
        text-align: center;
    }

    .heji {
        height: 35px;
        line-height: 35px;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
    }

    .table2 {
        font-weight: bold;
        text-align: center;
        border-bottom: 0px;
    }

    .beizhu {
        padding-left: 10px;
        padding-top: 10px;
        padding-bottom: 20px;
    }

    .beizhu_cont p {
        line-height: 25px;
        margin: 0;
        text-indent: 25px
    }
</style>
<script src="/assets/js/jquery-3.2.1.min.js"></script>
<style type="text/css" media="all">
    .kk .kuang_xinxi:nth-child(even) {
        background: rgba(255, 255, 255, 0.42);
    }

    .kk .kuang_xinxi:nth-child(odd) {
        background: rgba(241, 243, 245, 0.42);
    }

    .kuang_xinxi {
        border: 1px solid #fff;
        border-top: 0;
    }

    .list_tit {
        text-align: left;
        border-right: 1px solid #fff;
        box-sizing: border-box;
        padding-left: 20px;
    }

    .list_cont {
        padding-left: 10px;
        box-sizing: border-box;
    }

    .leftborder {
        border-left: 1px solid #fff;
    }

    .textleft {
        text-align: left;
    }
</style>
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <!--style="width:1100px!important;"-->
    <div class="modal-dialog" style="width:900px!important;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    <div id="anni" class="btn btn-primary" style="   padding: 0 10px;margin-left: 10px;">报价单下载</div>
                </h4>
            </div>
            <input type="hidden" id="id" name="id" value="">
            <div class="modal-body" id="baojiadann" style="position:relative;">
                <img src="{$site.bjd_beijing}" alt=""
                     style="position: absolute;left:0;top:0;width:100%;height:100%;z-index:0">
                <div class="kuang" style="border:0px;position: relative;z-index:1">

                    <div style="display:flex;align-items: center;">
                        <div style="width:83%;">
                            <div style="font-size:40px;letter-spacing: 6px;color:#1D263D;  font-weight:bold;font-style: italic ">
                                华资报价单
                            </div>
                            <div style="font-size:18px;color:#1D263D;position:relative;font-weight: 400;  ">

                                SERVICE QUOTATION
                            </div>
                        </div>
                        <div style="margin-top: 0px" class="logo">
                            <!--                            <img style="width:100px;" src="{$site.bjd_logo}" alt="" />-->
                            <img style="width: 130px;    position: absolute;right: 10px;top: 10px;" src="{$site.bjd1_logo}" alt=""/>
                        </div>
                    </div>
                    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;">
                        <div style="color:#1D263D;font-size:19px;">
                            我们以客户需求为中心，为您提供最优的服务方案
                        </div>
<!--                        <div style="font-size:19px;color:#4E71FE;">-->
<!--                            服务电话：{$site.bjd_phone}-->
<!--                        </div>-->
                    </div>


                    <!--border-radius:4px 20px 4px 4px;-->
                    <div style="  position: relative;color:#333;padding:8px;display:inline-block;padding-right:15px;display: flex;align-items: center;font-size: 17px">
                        <img src="{$site.bjd_jbxx}" alt="" style="width:21px;height: 21px;margin-right:10px">
                        基本信息
                    </div>
                    <div class="kk" style="padding:0;border-top: 1px solid #fff;margin-top: 10px;">
                        <div class="kuang_xinxi">
                            <div class="kuang_list">
                                <div class="list_tit">车牌号码</div>
                                <div class="list_cont" id="car_numm"></div>
                            </div>
                            <div class="kuang_list leftborder">
                                <div class="list_tit">车主</div>
                                <div class="list_cont" id="car_owner"></div>
                            </div>


                        </div>
                        <div class="kuang_xinxi">
                            <div class="kuang_list">
                                <div class="list_tit">车架号</div>
                                <div class="list_cont" id="chejiahao"></div>
                            </div>
                            <div class="kuang_list leftborder">
                                <div class="list_tit">发动机号</div>
                                <div class="list_cont" id="fadongji"></div>
                            </div>

                        </div>
                        <div class="kuang_xinxi">
                            <div class="kuang_list">
                                <div class="list_tit">厂牌型号</div>
                                <div class="list_cont" id="car_factory_num"></div>
                            </div>
                            <div class="kuang_list leftborder">
                                <div class="list_tit">使用性质</div>
                                <div class="list_cont" id="learned_namee"></div>
                            </div>
                        </div>
                        <div class="kuang_xinxi">
                            <div class="kuang_list">
                                <div class="list_tit">初登日期</div>
                                <div class="list_cont" id="car_registerr"></div>
                            </div>
                            <div class="kuang_list leftborder">
                                <div class="list_tit">车型</div>
                                <div class="list_cont" id="chexingg"></div>
                            </div>
                        </div>
                        <div class="kuang_xinxi">
                            <div class="kuang_list">
                                <div class="list_tit">核定载质量</div>
                                <div class="list_cont" id="car_carry_quality"></div>
                            </div>
                            <div class="kuang_list leftborder">
                                <div class="list_tit">核定载客量</div>
                                <div class="list_cont" id="car_carry_peo"></div>
                            </div>
                        </div>

                    </div>
                    <div style="color:#333;padding:8px;display:inline-block;padding-right:15px;display: flex;align-items: center;font-size: 17px;margin-top:30px;">
                        <img src="{$site.bjd_xm}" alt="" style="width:21px;height: 21px;margin-right:10px">
                        服务项目明细
                    </div>
                    <table class="table1" border="0" id="xiangmu" style="border:1px solid #fff">
                        <tr style="">
                            <td>服务项目</td>
                            <td style="border-left: 2px solid #000;">服务金额(元)</td>
                            <td style="border-left: 2px solid #000;">标准服务费</td>
                        </tr>
                        <tr>
                            <td>机动车损失服务</td>
                            <td style="border-left: 2px solid #000;">11000</td>
                            <td style="border-left: 2px solid #000;">3330</td>
                        </tr>
                        <tr>
                            <td>机动车第三者责任服务</td>
                            <td style="border-left: 2px solid #000;">11000</td>
                            <td style="border-left: 2px solid #000;">3330</td>
                        </tr>
                        <tr>
                            <td>标准服务费</td>
                            <td colspan="2" style="border-left: 1px solid #000;">11000</td>
                        </tr>
                        <tr>
                            <td>折扣：</td>
                            <td colspan="2" style="border-left: 1px solid #000;">50%</td>
                        </tr>
                        <tr>
                            <td>折后服务费：</td>
                            <td colspan="2" style="border-left: 1px solid #000;">566</td>
                        </tr>
                        <tr style="background:#3683D3;color:#fff">
                            <td>附加服务项目</td>
                            <td style="border-left: 2px solid #000;">服务金额（元）</td>
                            <td style="border-left: 2px solid #000;">标准服务费</td>
                        </tr>
                        <tr>
                            <td>医保外用药</td>
                            <td style="border-left: 2px solid #000;">11000</td>
                            <td style="border-left: 2px solid #000;">3330</td>
                        </tr>
                        <tr>
                            <td>应缴服务费</td>
                            <td colspan="2" style="border-left: 2px solid #000;">12154</td>
                        </tr>

                    </table>
                    <div class="heji" style="display:none">合计</div>
                    <table class="table1 table2" border="0" style="display:none">
                        <tr>
                            <td>标准服务费合计(元)</td>
                            <!--<td style="border-left: 1px solid #000;">折扣(%)</td>-->
                            <td style="border-left: 1px solid #000;">应缴服务费(元)</td>
                        </tr>
                        <tr>
                            <td id="main_sum"></td>
                            <!--<td style="border-left: 1px solid #000;" id="main_sumdiscount"></td>-->
                            <td style="border-left: 1px solid #000;" id="main_free"></td>
                        </tr>
                    </table>
                </div>
                <div class="beizhu" style="display:none">
                    <div class="beizhu_tit">备注：</div>
                    <div class="beizhu_cont">
                        <br>
                        <br>
                        <p>
                            验车要求:车身前后左右45°角共4张照片拍全车身、1张车架号照，发动机照片（打着火的仪表盘），人车合影共7张，每张照片上附当日验车码。</p>
                        <!-- <p>(2)验车要求：车身前后左右45度角验车要求：车身前后左右45度角验车要求：车身前后左右45度角验车要求：车身前后左右45度角</p> -->
                        <p></p>
                        <p></p>
                        <p></p>
                        <div></div>
                    </div>
                </div>
                <div style="display:flex;font-size: 16px;color: #666666;padding-top:15px;position:relative;">
                    <div>
                        报价日期：<span id="bjrq"></span>
                    </div>

                </div>
                <div>
                    <!--                    <img src="/bao.png" alt="" style="width:100%;margin-top:10px;transform: rotate(-180deg);" />-->
                </div>
            </div>
        </div>
    </div>
</div>

<!--缴费-->
<div class="modal fade" id="myModal_newjiaofei" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width:900px!important;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>

                <h4 class="modal-title" style="display:flex;align-items:center">
                    缴费
                    <div style="display:flex;align-items:center;margin-left:10px">
                        <div style="display:flex;align-items:center">
                            <input type="radio" style="margin:0" name="xuan_tit" value="1" id="aa" checked/><label
                                for="aa" style="margin:0;margin-right:10px;margin-left:5px">被服务人</label>
                        </div>
                        <div style="display:flex;align-items:center">
                            <input type="radio" style="margin:0" name="xuan_tit" value="2" id="bb"/><label for="bb"
                                                                                                           style="margin:0;margin-left:5px">车主姓名</label>
                        </div>
                    </div>
                    <label style=" margin-top:5px;display: flex;align-items: center;margin-left: 10px;">
                        <input style="margin:0" type="checkbox" id="newxiangmu1" value="newxiangmu1" name="newxiangmu1"
                               onclick="OncheckBox(this,'new')">
                        <div style="margin-left:8px">
                            服务项目
                        </div>
                    </label>
                    <label style=" margin-top:5px;display: flex;align-items: center;margin-left: 10px;">
                        <input style="margin:0" type="checkbox" id="newtiaokuan" value="newtiaokuan" name="newtiaokuan"
                               onclick="Ontiaokuan(this)">
                        <div style="margin-left:8px">
                            服务条款
                        </div>
                    </label>
                    <label style=" margin-top:5px;display: flex;align-items: center;margin-left: 10px;">
                        <input style="margin:0" type="checkbox" id="beijingtu" value="beijingtu" name="beijingtu"
                               onclick="beijingtu(this)">
                        <div style="margin-left:8px">
                            背景图
                        </div>
                    </label>

                </h4>
            </div>
            <div class="gshn">
                {include file="lists/one/jiaofei"/}
            </div>

        </div>
    </div>
</div>
<input type="hidden" name="" id="gs_typee" value=""/>
<input type="hidden" id="new_jiaofei_id" value=""/>
<script>
    function copaylink(id, gs_type) {
        console.log('++++++++++++++++')
        var txt = window.location.protocol + '//' + window.location.host + '/index/qianzi/dian?dian=' + id;
        var flag = copyText(txt);//这个必须在DOM对象的事件线程中执行
        layer.msg(flag ? "复制成功！" : "复制失败！");
    };

    function copyText(text) {
        var textarea = document.createElement("textarea");
        var currentFocus = document.activeElement;
        document.body.appendChild(textarea);
        textarea.value = text;
        textarea.focus();
        if (textarea.setSelectionRange)
            textarea.setSelectionRange(0, textarea.value.length);
        else
            textarea.select();
        try {
            var flag = document.execCommand("copy");
        } catch (eo) {
            var flag = false;
        }
        document.body.removeChild(textarea);
        currentFocus.focus();
        return flag;
    }

    // 签字弹窗
    function qianzi(id, gs_type) {
        if (confirm('是否重新签字')) {
            $.ajax({
                url: "{:url('lists/one/chong_qian')}",
                dataType: 'json',
                type: 'post',
                data: {'id': id},
                success: function (res) {
                    var txt = window.location.protocol + '//' + window.location.host + '/index/qianzi/dian?dian=' + id;
                    var flag = copyText(txt);//这个必须在DOM对象的事件线程中执行
                    layer.msg(flag ? "复制成功！" : "复制失败！");
                }
            })

        }
    }
</script>
<script>
    function beijingtu(index) {
        var type = ''
        var id = $("#new_jiaofei_id").val()
        if ($("#beijingtu").is(':checked')) {
            // 选中
            type = 1
        } else {
            // 未选中
            type = 2
        }
        $.ajax({
            url: "lists/one/bjt",
            dataType: 'json',
            type: 'post',
            data: {
                type: type,
                id: id
            },
            success: function (res) {
            }
        })
    }

    // 服务条款
    function Ontiaokuan(index) {
        var type = ''
        var id = $("#new_jiaofei_id").val()
        if ($("#newtiaokuan").is(':checked')) {
            // 选中
            type = 1
        } else {
            // 未选中
            type = 2
        }
        $.ajax({
            url: "lists/one/tk_type",
            dataType: 'json',
            type: 'post',
            data: {
                type: type,
                id: id
            },
            success: function (res) {
            }
        })
    }

    function OncheckBox(index, leixing) {
        console.log(leixing)
        var type = ''

        if (leixing == 'old') {
            if ($("#xiangmu1").is(':checked')) {
                // 选中
                type = 2
            } else {
                // 未选中
                type = 1
            }
            console.log($("#jiaofeiid").val())
            var id = $("#jiaofeiid").val()
        } else {

            if ($("#newxiangmu1").is(':checked')) {
                // 选中
                type = 2
            } else {
                // 未选中
                type = 1
            }
            console.log($("#new_jiaofei_id").val())
            var id = $("#new_jiaofei_id").val()
        }

        $.ajax({
            url: "lists/one/tcxm",
            dataType: 'json',
            type: 'post',
            data: {
                type: type,
                id: id
            },
            success: function (res) {
            }
        })
    }

    // 		--新的缴费弹窗--
    $("input[name='xuan_tit']").change(function () {

        console.log("Selected value: ");
        var type = $(this).val();
        var id = $("#new_jiaofei_id").val()
        $.ajax({
            url: "lists/one/chezhu",
            dataType: 'json',
            type: 'post',
            data: {
                type: type,
                id: id
            },
            success: function (res) {
                if (type == 1) {
                    var selectedValue = '被服务人:'
                    var newjiao_name = res.data.learned_name
                } else {
                    var selectedValue = '车主姓名:'
                    var newjiao_name = res.data.car_owner
                }
                $(".namee").html(selectedValue)
                $("#newjiao_name").html(newjiao_name)
            }
        })


    });
</script>
